<template>
  <view class="wrong-wrap" :data-theme="globPrimary">
    <u-navbar :z-index="10076">
      <view class="wrong-navbar" :style="[titleStyle]" @click="clickNavbarHeader">
        <view class="title u-line-1">错题本</view>
        <u-image
          class="img"
          :class="{ active: navbarPopupVisible }"
          width="36rpx"
          height="36rpx"
          src="@/pageUser/static/images/myexam_up_icon.png"
        ></u-image>
      </view>
    </u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getdataInfo"
    >
      <view
        class="wrong-item u-border-bottom"
        v-for="(item, index) in list"
        :key="index"
        @click="clickWrongItem(item)"
      >
        <view class="title u-line-2">
          <u-tag
            :text="item.question_type_text"
            size="mini"
            mode="dark"
            :bg-color="globPrimaryColor"
          />
          {{ delHtmlTag(item.topic_title) }}
        </view>
        <view class="desc">
          <text class="text">答错{{ item.wrong_count }}次</text>
          <view>
            <u-line direction="col" length="16rpx" margin="0 16rpx" />
          </view>
          <text class="text">累计作答{{ item.answer_count }}次</text>
          <text class="text">{{ item.wrong_time | date('yyyy-mm-dd hh:MM:ss') }}</text>
        </view>
      </view>
    </mescroll-body>
    <u-popup v-model="navbarPopupVisible" mode="top">
      <view
        :style="{
          width: '100%',
          height: globNavbarHeight + globStatusBarHeight + 'px',
        }"
      ></view>
      <view class="wrong-popup">
        <view
          class="wrong-popup-item u-border-bottom"
          :class="{
            active: navbarActive == item.value,
          }"
          v-for="item in navbarOptions"
          :key="item.value"
          @click="clickNavbarItem(item.url)"
        >
          {{ item.title }}
        </view>
      </view>
    </u-popup>
    <view class="wrong-bottom" v-if="!$u.test.empty(list)">
      <u-icon name="shunxu_icon" custom-prefix="edu-icon" size="30" color="#fff"></u-icon>
      <view class="sort" @click="clickWrongTraining()">顺序重练</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      navbarActive: 2,
      navbarPopupVisible: false,
      navbarOptions: [
        {
          title: '我的待考',
          value: 4,
          url: '/pageUser/exam/index',
        },
        {
          title: '考试记录',
          value: 1,
          url: '/pageUser/exam/record',
        },
        {
          title: '错题本',
          value: 2,
          url: '/pageUser/exam/wrong',
        },
        {
          title: '题目收藏',
          value: 3,
          url: '/pageUser/exam/collected',
        },
      ],
      list: [],
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
    // 导航中间的标题的样式
    titleStyle() {
      let titleWidth = 250
      let systemInfo = this.$u.sys()
      let style = {}
      // #ifndef MP
      style.left = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      // #endif
      // #ifdef MP
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left
      style.left = (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 + 'px'
      style.right =
        rightButtonWidth -
        (systemInfo.windowWidth - uni.upx2px(titleWidth)) / 2 +
        rightButtonWidth +
        'px'
      // #endif
      style.width = uni.upx2px(titleWidth) + 'px'
      return style
    },
  },
  methods: {
    clickNavbarHeader() {
      this.navbarPopupVisible = !this.navbarPopupVisible
    },
    clickNavbarItem(url) {
      this.navbarPopupVisible = false
      this.$u.route(url)
    },
    getdataInfo(page) {
      this.$edu.api
        .getWrongList({
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          if (page.num == 1) this.list = []
          this.list = this.list.concat(data.data)
          this.mescroll.endBySize(data.data.length, data.total)
        })
    },
    clickWrongItem(item) {
      this.$u.route('/pageFound/exam/wrong', {
        id: item.id,
      })
    },
    // 顺序重练
    clickWrongTraining() {
      this.$u.route('/pageFound/exam/wrong', {
        id: this.list[0].id,
        type: 1,
      })
    },
    // 去除富文本的标签
    delHtmlTag(html = '') {
      // 获取内容
      let reg = new RegExp('<.+?>|&nbsp;', 'g') //匹配html标签的正则表达式
      let text = html.replace(reg, '') //执行替换成空字符
      return text
    },
  },
}
</script>

<style lang="scss" scoped>
.wrong-wrap {
  background-color: #ffffff;
}
.wrong-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  height: 60rpx;
  .title {
    font-size: 16px;
    color: $edu-content-color;
  }
  .img {
    transform: rotate(180deg);
    margin-left: 12rpx;
    &.active {
      transform: rotate(0deg);
    }
  }
}
.wrong-item {
  margin-left: 30rpx;
  padding: 24rpx 30rpx 24rpx 0;
  .title {
    font-size: 28rpx;
    font-weight: 500;
    color: $edu-main-color;
    line-height: 50rpx;
  }
  .u-tag {
    margin-right: 10rpx;
  }
  .desc {
    margin-top: 28rpx;
    display: flex;
    align-items: center;
    .text {
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .text:last-child {
      margin-left: auto;
    }
  }
}
.wrong-popup {
  padding: 0 30rpx 0;
  .wrong-popup-item {
    padding: 24rpx 0;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-content-color;
    &.active {
      @include text-color();
    }
  }
}

.wrong-bottom {
  position: fixed;
  left: 50%;
  right: 0;
  z-index: 99;
  bottom: 72rpx;
  width: 300rpx;
  height: 80rpx;
  margin-left: -150rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  @include bg-color();
  font-size: 32rpx;
  font-weight: 400;
  color: #ffffff;
  .u-icon {
    margin-right: 10rpx;
  }
}
</style>
